<template>
    <div class="headerBox">
        <div class="touxiang">
            <el-avatar :src="touxiang.avatar"></el-avatar>
            <p>{{ touxiang.name }}</p>
        </div>
        <div class="logout">
            <el-popover placement="bottom" width="160" v-model="visible">
                <p>您确定退出黑马面运营后台吗？</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="logout">确定</el-button>
                </div>
                    <i slot="reference" title="logout" class="el-icon-switch-button icon"></i>
            </el-popover>
            <!-- <el-popconfirm title="您确认退出黑马面运营后台吗？" @confirm="handleConfirm">
                <i slot="reference" title="logout" class="el-icon-switch-button"></i>
            </el-popconfirm> -->
        </div>
    </div>
</template>

<script>
import { deleteToken } from "@/utils/token.js";
import { getUser } from "@/api/user.js";

export default {
data() {
    return {
        visible: false,
        touxiang:[]
    }
},
created(){
    getUser().then(res=>{
        this.touxiang = res.data
    }).catch(err=>{
        
    })
},
methods:{
    logout(){
        this.visible = false
        deleteToken()
        this.$message({
            message: '恭喜你，退出成功',
            type: 'success'
        });
        this.$router.push('/login')
    }
}
}
</script>

<style lang="scss" scoped>
.headerBox{
    display: flex;
    justify-content: end;
    min-width: 1300px;
}
.logout{
    display: flex;
    align-items: center;
    margin:0 30px;
}
.icon{
    font-size:30px;
    color: #d7dce0;
}
.touxiang {
    width: 200px;
    height: 60px;
    background-color: #FAFBFD;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
        margin-left: 15px;
    }
}
</style>